<template>
  <div class="bg-white _p-20 _pt-5 _mt-20" style="flex:1">
    <div class="fz-16 title linh-48 disFlxJS">
      <div>报名费用总览</div>
    </div>
    <div class="gridBox">
      <template v-for="item in list">
        <div v-if="item.show" :key="item.label" class="disFlxAC flexCol">
          <a-popover :content="item.desc">
            <div class="disFlxAC">
              <div>{{ item.label }}</div>
              <a-icon type="question-circle" style="color:#C9CDD4" />
            </div>
          </a-popover>

          <div class="fz-24 fw-6 text-dark-900">
            {{ item.value || 0 }}
          </div>
          <NumIncrease v-if="item.today !== undefined" :number="item.today"></NumIncrease>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { accMul } from '@/utils/number'
import NumIncrease from '../components/NumIncrease/index.vue'

export default {
  components: {
    NumIncrease
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    list() {
      return [
        {
          label: '报名数（总）',
          value: this.info.totalTicketNum,
          today: this.info.todayTotalTicketNum,
          show: true,
          desc:
            '报名数（总）：活动报名成功的总人数（包含后台导入/代报名成功的、已经取消报名的；不包含报名申请中、报名被驳回的、管理员导入未分配报名类型的报名人员）；'
        },

        {
          label: '取消报名数（总）',
          value: this.info.refundTicketNum,
          today: this.info.todayRefundTicketNum,
          show: true,
          desc:
            '取消报名数（总）：报名成功后，再取消报名的总数（包含管理员导入分配了报名类型的报名取消报名；不包含报名被驳回的）；'
        },
        {
          label: '取消率（总）',
          value: accMul(this.info.refundRate || 0, 100) + '%',
          today: undefined,
          show: true,
          desc: '取消率(总):取消报名总数 ÷ 报名总数 = 取消率（四舍五入保留2位百分比小数）'
        },
        {
          label: '报名费收入（总）',
          value: this.info.totalTicketPrice,
          today: this.info.todayTotalTicketPrice,
          show: true,
          desc:
            '报名费收入（总）：活动报名成功收到的总费用（普通类型/管理员导入的报名金额记为0，包含已经取消报名的金额;不包含报名被驳回的）；'
        },
        {
          label: '退款金额（总）',
          value: this.info.totalRefundPrice,
          today: this.info.todayTotalRefundPrice,
          show: true,
          desc:
            '退款金额（总）：报名成功后，再取消报名的退款金额总数（普通类型/管理员导入的报名金额记为0；不包含报名被驳回的）；'
        },
        {
          label: '费用净收入（总）',
          value: this.info.ticketPrice,
          today: this.info.todayTicketPrice,
          show: true,
          desc: '费用净收入（总）：报名费收入（总）- 退款金额（总）= 费用净收入（总）；'
        }
      ]
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.title {
  color: #1d2129;
  border-bottom: solid 1px #e5e6eb;
}

.gridBox {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 0.5rem;
  column-gap: 0.5rem;
  grid-row-gap: 2rem;
  row-gap: 2rem;
  text-align: center;
  padding-top: 20px;
}
</style>
